<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width: 100%;
        }
        div{
            width: 600px;
            height: 500px;
            position: relative;
            span{
                position: absolute;
                width: 100px;
                height: 50px;
           
            }
            .red{
                left: 10%;
                top: 15%;
            }
            .yellow{
                right: 30%;
                top: 5%;
            }
            p{
                position: absolute;
        bottom: 56%;
        left: 50%;
        width: 116px;
        height: 55px;
        background: #f3f5f5;
        text-align: center;
        line-height: 55px;
        font-size: 38px;
            }
        }

    </style>
</head>
<body>
    <div>
        <img src="https://s11.ax1x.com/2023/10/27/piZ7xCF.jpg" alt="">
        <span class="red"></span>
        <span class="yellow"></span>
        <p>10:00</p>
    </div>
    <script>
        // 获取img
        let img = document.querySelector('img')
        // 获取两根线
        let red = document.querySelector('.red')
        let yellow = document.querySelector('.yellow')
        // 添加点击事件
        red.onclick=function(){
            console.log('红色');
             img.src='https://img.soogif.com/dpndKfwpXb5QwS170f53BxmfhDHWF9gP.gif_s400x0'
            // 移除定时器
            clearInterval(c4)
            p.style.display = 'none'
            
        }
        yellow.onclick=function(){
            console.log('黄色');
             img.src='https://tukuimg.bdstatic.com/scrop/114b521c51b64e95c1eb6f7404fc4367.gif'
             clearInterval(c4)
              p.style.display = 'none'
            }
        // 倒计时功能
        // 设置倒计时时间
        let tiem =  5
        // 获取倒计时的dom
        let p = document.querySelector('p')
        let c4 = setInterval(()=>{
            if (tiem==0) {
                img.src='https://tukuimg.bdstatic.com/scrop/114b521c51b64e95c1eb6f7404fc4367.gif'
                  p.style.display = 'none'
                return
            }
            tiem--
            // 使用字符串padStart方法进行向前补位操作
            // padStart(位数，补位信息)
            // 注意：padEnd向后补位
            let ss = String(tiem%60).padStart(2,'0')
            let mm = parseInt(tiem/60)
            // 运用三元运算的方式进行补位
            mm = mm>=10?mm:'0'+mm
            console.log(mm,ss);
            // 使用模板字符串添加时间
            p.innerHTML = `${mm}:${ss}`
            

        },1000)

    </script>
    
</body>
</html>